<template>
  <el-button :type="time<60?'default':'primary'" plain size="small">{{text}}</el-button>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator'

  @Component()
  export default class ValidImageCode extends Vue {
    @Prop() phoneNum: string
    time: number = 60
    text: string = '获取短信验证码'
    timeId = null

    start () {
      if (this.time < 60) {
        this.$notify.error('您的短信验证码已经发送,请稍后再试')
      } else {
        if (this.timeId) {
          return
        }
        this.getMessageCode().then(data => {
            if (data.responseCode == 200) {
              this.timeId = setInterval(_ => {
              this.time -= 1
              this.text = `${this.time}秒后再次发送`
              if (this.time < 2) {
                this.text = '重新获取验证码'
                this.time = 60
                clearInterval(this.timeId)
                this.timeId = null
              }
            }, 1000)
          }
        })
      }
    }

    async getMessageCode () {
      let res: AjaxResponse = await this.$axios.post(`g/gateway/message/sendVerify/${this.phoneNum}`)
      this.$utils.tips(res)
      
      return res
    }
    mounted(){
    }
  }
</script>

<style lang="less" scoped>

</style>
